<template>
  <div class="home">
    <!-- 顶部搜索导航 -->
    <div class="header">
      <div class="weather">
        <Weather />
      </div>
      <van-search
        v-model="searchValue"
        placeholder="搜索商品"
        shape="round"
        background="transparent"
      />
      <div class="user-icon" @click="router.push('/user')">
        <van-icon name="manager" size="24" />
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe :autoplay="3000" :show-indicators="true" @change="onChange">
          <van-swipe-item v-for="(item, index) in banners" :key="index">
            <div class="banner-content" :style="{ backgroundColor: item.bgColor }">
              <h2 class="title">{{ item.title }}</h2>
              <p class="subtitle">{{ item.subtitle }}</p>
              <van-icon :name="item.icon" size="40" color="#fff" class="banner-icon" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 医疗服务 -->
      <div class="section medical-service">
        <div class="section-title">医疗服务</div>
        <div class="medical-services">
          <div class="service-item" @click="router.push('/medical')">
            <div class="service-icon">
              <van-icon name="cross" color="#ee0a24" />
            </div>
            <div class="service-content">
              <h3>乡村医疗协助</h3>
              <p>专业医生在线</p>
            </div>
          </div>
          <div class="service-item" @click="router.push('/health')">
            <div class="service-icon">
              <van-icon name="clock" color="#1989fa" />
            </div>
            <div class="service-content">
              <h3>定期体检预约</h3>
              <p>健康管理专家</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 助农服务 -->
      <div class="section farmer-service">
        <div class="section-title">助农服务</div>
        <van-grid :column-num="4" :border="false" :gutter="10">
          <van-grid-item v-for="item in farmerServices" :key="item.id" :icon="item.icon" :text="item.name" />
        </van-grid>
      </div>

      <!-- 热门商品 -->
      <div class="section hot-products">
        <div class="section-title">热门商品</div>
        <div class="product-list">
          <van-card
            v-for="item in hotProducts"
            :key="item.id"
            :price="item.price"
            :title="item.name"
            :desc="item.description"
            :thumb="item.url"
          >
            <template #tags>
              <van-tag plain type="danger">{{ item.tag }}</van-tag>
            </template>
            <template #footer>
              <van-button size="small" type="primary" @click="onAddToCart(item)">加入购物车</van-button>
            </template>
          </van-card>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <TabBar />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import TabBar from '@/components/TabBar.vue'
import Weather from '@/components/Weather.vue'
import request from '@/utils/request'
const router = useRouter()

// 搜索值
const searchValue = ref('')
// 热门商品数据
const hotProducts = ref(()=>[])
function startFn(){
  request.get('/products')
  .then(res => {
    hotProducts.value = res
    hotProducts.value.forEach(item => {
      item.url = `http://8.137.113.18:8889${item.url}`
    })
  })
  .catch(err => {
    console.log(err)
  })
}
startFn();
// 助农服务数据
const farmerServices = ref([
  { id: 1, name: '种子采购', icon: 'flower-o' },
  { id: 2, name: '医疗用品', icon: 'gift-o' },
  { id: 3, name: '生活用品', icon: 'shop-o' },
  { id: 4, name: '农产品', icon: 'gift-card-o' },
])

// 轮播图数据
const banners = [
  { 
    bgColor: '#4fc08d',
    title: '村宝易购',
    subtitle: '助力乡村振兴',
    icon: 'shop'
  },
  { 
    bgColor: '#ee0a24',
    title: '医疗服务',
    subtitle: '专业医生在线问诊',
    icon: 'cross'
  },
  { 
    bgColor: '#ff6b00',
    title: '农产品直供',
    subtitle: '产地直发 新鲜到家',
    icon: 'gift-o'
  },
  { 
    bgColor: '#1989fa',
    title: '便民服务',
    subtitle: '一站式生活服务',
    icon: 'service-o'
  },
  { 
    bgColor: '#7232dd',
    title: '健康生活',
    subtitle: '定期体检 关爱健康',
    icon: 'like'
  }
]

// 轮播切换事件
const onChange = (index) => {
  // console.log('当前轮播图索引：', index)
}

// 添加到购物车
const onAddToCart = (item) => {
  showToast({
    message: '添加成功',
    type: 'success'
  })
}
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .weather {
    min-width: 120px;
    height: 36px;
  }

  .van-search {
    flex: 1;
    margin: 0 8px;
    
    :deep(.van-search__content) {
      background-color: #f7f8fa;
    }
  }

  .user-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:active {
      opacity: 0.7;
    }
  }
}

.content {
  flex: 1;
  overflow-y: auto;
  margin-top: 52px; // 顶部导航的高度
  padding-bottom: 50px; // 底部导航的高度
}

.banner {
  margin-bottom: 20px;
  
  .banner-content {
    height: 160px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
    overflow: hidden;

    .title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 16px;
      opacity: 0.9;
    }

    .banner-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.section {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 8px;

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #323233;
  }
}

.medical-service {
  .medical-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .service-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: #f7f8fa;
      border-radius: 8px;
      height: 72px;

      .service-icon {
        margin-right: 8px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        .van-icon {
          font-size: 20px;
        }
      }

      .service-content {
        flex: 1;
        min-width: 0;

        h3 {
          font-size: 14px;
          margin-bottom: 2px;
          color: #323233;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        p {
          font-size: 12px;
          color: #969799;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      &:active {
        background: #f2f3f5;
      }
    }
  }
}

.farmer-service {
  :deep(.van-grid-item__content) {
    padding: 16px 8px;
  }

  :deep(.van-grid-item__text) {
    font-size: 12px;
    margin-top: 4px;
    color: #666;
  }
}

.hot-products {
  .product-list {
    .van-card {
      background: #f7f8fa;
      margin-bottom: 8px;
      border-radius: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style> 